<template>
    <div class="grid-content bg-purple-light">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <i class="el-icon-data-analysis" style="font-size: 20px;color: rgb(4, 4, 159);"></i>
                <span>救援任务统计</span>
            </div>
            <div id="main2" style="width: 300px;height: 200px;"></div>
        </el-card>
    </div>
</template>

<script>
import { selectIndent } from '@/api/dashboard'
// import Schart from 'vue-schart';
import * as echarts from 'echarts';
export default {
    // name:'order',
    props:['childtime'],
    data(){
        return{
            myChart:null,
            endtime:''
        }
    },
    mounted(){
        // console.log(this.endtime);
        this.endtime=this.childtime
        this.myChart = echarts.init(document.getElementById('main2'));
        this.handleechart1()
    },
    methods:{
        async handleechart1() {
            let myChart = this.myChart
            var dayjs = require('dayjs')
          
            if(this.endtime){
                this.endtime = dayjs(this.endtime).format('YYYY-MM-DD')
            }else{
                this.endtime=dayjs(new Date()).format('YYYY-MM-DD')
            }
            let obj = {
                endtime:this.endtime
            }
            const param = new URLSearchParams(obj)
            const res = await selectIndent('/selectrescue',param)
            // console.log(res.data);


            
            myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['已救援', '未救援']
            },
            color: ['blue', 'red'],
            series: [
                {
                    name: '任务统计',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: res.data
                }
            ]
        })
            // this.myChart=myChart
        }
    }
}
</script>

<style lang="scss" scoped></style>